<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>内间距</title>
		<style>
			.box{
				width: 300px;
				height: 300px;
				background-color: aqua;
				border: 1px solid #f00;
				
				
			}
			.p1{
				
				background-color: #f00;
				padding-left: 15px;
				padding-top: 30px;
			}
			.p2{
				height: 30px;
				background-color: aquamarine;
				margin-top: 50px;
				
			}
			.sp1{
				/* display: block; */
				height: 20px;
				background-color: red;
				padding-left: 20px;
				padding-top: 20px;
				margin-top: 100px;
				margin-left: 20px;
			}
		/* -----------------------------------------------	 */
			.fu{
				/* 方案一*/
				border: 1px solid rgba(255, 255, 0, 0.3);
				/*方案二*/
				padding: 1px 0px;
				/* 方案三  块级格式化上下文BFC*/
				overflow: hidden;
				
				background-color: rgba(255, 255, 0, 0.3);
			}
			.fu div{
				height: 100px;
				width: 100px;
				/* border: 1px solid red; */
				
			}
			.z1{
				background-color: rgba(255, 0, 0, 0.5);
			}      
			.z2{   
				background-color: rgba(0, 255, 0, 0.5);
			}      
			.z3{   
				background-color: rgba(255, 0, 255, 0.5);
			}      
			.z4{   
				background-color: rgba(0, 255, 255, 0.5);
			}      
			.z5{   
				background-color: rgba(0, 0, 255, 0.5);
			}
		</style>

	</head>
	<body>
		
		<div class="box">
			我是一个div元素
		</div>
		<p class="p1">123456</p>
		<p class="p2">123456</p>
		<span class="sp1">132132</span>
		<hr>
		<div class="fu">
			<div class="z1">子元素div1</div>
			<div class="z2">子元素div2</div>
			<div class="z3">子元素div3</div>
			<div class="z4">子元素div4</div>
			<div class="z5">子元素div5</div>
		</div>
		
	</body>
</html>